<template>
  <div class="reportTree-container">
    <el-input v-if="showFile" v-model.trim="filterText" placeholder="输入关键字过滤"></el-input>
    <div style="padding:10px;background-color:#fff;">
        <el-radio-group v-model="radio">
            <el-radio :label="1">个人模板</el-radio>
            <el-radio :label="2">系统模板</el-radio>
        </el-radio-group>
    </div>
    <el-tree :data="data" ref="tree" :filter-node-method="filterNode" :props="defaultProps" @node-click="handleNodeClick" icon-class="el-icon-folder-opened"></el-tree>
  </div>
</template>

<script>
import api from "@/api/index";
export default {
  props:['callback','showFile'],
  data() {
    return {
      data: [],
      filterText:'',
      radio:1,
      defaultProps: {
        label:'name',
        children:'children'
      },
      system:[],
      self:[]
    };
  },
  watch: {
      filterText:function(val) {
        this.$refs.tree.filter(val);
      },
      radio:function(val){
        if(val == 1){
          this.data=this.self;
        }else{
          this.data=this.system;
        }
      }
  },
  created() {
    this.getTreeInfo();
  },
  methods: {
    filterNodebak(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
    },
     filterNode(value, data) {
       console.log("xunh",data)
        if (!value) return true;
        return data.name.indexOf(value) !== -1;
    },

    filterNode11(value, data) {
       console.log("xunh",data)
        if (!value) return true;
        return data.name.indexOf(value) !== -1;
    },


    
    getTreeInfo() {
      this.$http
        .get(api.MOBILE_REPORT_TREEv2, {})
        .then((res) => {
          if (res.code == 200) {
            this.system = Array.isArray(res.data)?res.data:[];
           
            if(this.radio == 2){
              this.data=this.system;
            }
          }
        })

      this.$http
        .get(api.MOBILE_REPORT_TREE_SELFv2, {})
        .then((res) => {
          if (res.code == 200) {
             
            this.self = Array.isArray(res.data)?res.data:[];
            if(this.radio == 1){
              this.data=this.self;
              console.log("tree", this.self,"chek",this.radio)
            }
          }
        })
    },
    handleNodeClick(data,node){

//       this.$nextTick(() => {
//                         this.$refs['tree'].updateKeyChildren(data.id,result);
//                     })
    // MOBILE_REPORT_TREEsys_level2:'/system/hospitalTemplate/listByBodyPartId',//树形结构详情
    // MOBILE_REPORT_TREEself_level2:'/system/template/listByDoctorId',//树形结构详情


     let url="";
     if(this.radio == 1){
       // 个人
        url=api.MOBILE_REPORT_TREEself_level2;
     }   
     if(this.radio == 2){
       // 系统
        url=api.MOBILE_REPORT_TREEsys_level2;
     } 

      // console.log(data);
      // console.log(node.childNodes.length);
      console.log(node.parent.level);
       // 1级请求数据 
        if(data.id&&node.parent.level==0 ){
          // remove
          //  this.$refs['tree'].remove(node);
          if(node.childNodes){
            node.childNodes=[];
          }

            url=url+"/"+data.id;
            this.$http
                .get((url), {zid:data.zid})
                .then((res) => {
                    if (res.code == 200) {
                       let child = Array.isArray(res.data)?res.data:[];
                        for (let i = 0; i < res.data.length; i++) {
                            // console.log(res.data[i]);
                         // this.$refs['tree'].append(res.data.listtreenode[i], data);  //给tree树结构添加节点数据
                          this.$refs['tree'].append(res.data[i], node);  //给tree树结构添加节点数据
                       
                       }
                      //  if(typeof this.callback == 'function'){
                      //     this.callback(res.data);
                      //  }
                    }
                })
        }else{
          // 获取子类
          
    // 部位： {{treeInfo.bodyPartStr}} 
    // 检查类型： {{treeInfo.checkType}} 
    // 模板名称： {{treeInfo.templateName}} 
    // 影像所见： {{treeInfo.imageFinding}} 
    // 诊断意见： {{treeInfo.diagnoseOpinion}}</span>


              let treeInfo=[];
              treeInfo.bodyPartStr=data.bodyPartName;
              treeInfo.checkType=data.type;
              treeInfo.templateName=data.name;
              treeInfo.imageFinding=data.imageView;
              treeInfo.diagnoseOpinion=data.opinion;
              if(typeof this.callback == 'function'){
                    this.callback(treeInfo);
               }


        }
    },


      handleNodeClickbak(e){

//       this.$nextTick(() => {
//                         this.$refs['tree'].updateKeyChildren(data.id,result);
//                     })


      console.log(e);
        if(!e.children){
            this.$http
                .post((this.radio == 2?api.MOBILE_REPORT_TREE_DETAIL:api.MOBILE_REPORT_TREE_DETAIL_SELF), {zid:e.zid})
                .then((res) => {
                    if (res.code == 1) {
                       if(typeof this.callback == 'function'){
                          this.callback(res.data);
                       }
                    }
                })
        }
    }

  },
};
</script>

<style lang="less">
.reportTree-container{
    padding:10px;
}
</style>
